<template>
  <div class="article-list">
    <article
      class="article-item flex-vertical-center"
      v-for="i in '120'"
      :key="i"
      @click="nav2Detail"
    >
      <img
        class="thumb img-cover"
        src="https://www.w3cschool.cn/attachments/image/20170110/1484014254951184.png"
      />
      <div class="margin-left-15">
        <h2>LESS教程</h2>
        <div class="margin-bottom-5">
          <span class="time-txt">2020-12-22 14:23:20</span>
        </div>
        <div class="pre-content" @click.stop>
          LESS是一门 CSS 预处理语言，它扩充了 CSS
          语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS
          更易维护、方便制作主题、扩充。LESS
          可以让我们用更少的代码做更多的事情。LESS 是以 CSS
          语法为基础，又借用了很...
          <!-- 应限制120个字 -->
        </div>
      </div>
    </article>
  </div>
</template>

<script lang="ts">
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    // way1
    const { ctx } = getCurrentInstance() as any;
    const router = useRouter();

    const nav2Detail = () => {
      router.push({ path: "/details/"+'7db8a8d767b8c86f' }); //地址栏可见
    };
    const methods = {
      nav2Detail,
    };
    return {
      ...methods,
    };
  },
};
</script>

<style lang="less" scoped>
</style>